<template>
  <el-dialog v-model="dialogVisible" :show-close="false" width="800px" class="settings-dialog" align-center>
    <div class="bg-white flex flex-col h-[600px]">
      <!-- 标题栏 -->
      <div class="flex items-center justify-between px-6 py-4 border-b border-gray-100">
        <h2 class="text-lg font-medium text-gray-900">设置</h2>
        <button @click="dialogVisible = false" class="text-gray-400 hover:text-gray-600">
          <el-icon :size="20">
            <Close />
          </el-icon>
        </button>
      </div>

      <!-- 主体内容区 -->
      <div class="flex-1 flex">
        <!-- 左侧导航 -->
        <div class="w-64 border-r border-gray-100 overflow-y-auto">
          <div class="py-4">
            <h3 class="text-xs font-medium text-gray-500 px-4 mb-2 uppercase">账号设置</h3>
            <div class="space-y-1">
              <button v-for="item in accountSettings" :key="item.key" @click="currentSection = item.key"
                class="w-full flex items-center px-4 py-2.5 text-sm transition-colors" :class="[
                  currentSection === item.key
                    ? 'bg-gray-100 text-gray-900'
                    : 'text-gray-600 hover:bg-gray-50'
                ]">
                <el-icon class="mr-3" :size="18">
                  <component :is="item.icon" />
                </el-icon>
                <span>{{ item.label }}</span>
              </button>
            </div>
          </div>

          <div class="py-4">
            <h3 class="text-xs font-medium text-gray-500 px-4 mb-2 uppercase">关于</h3>
            <div class="space-y-1">
              <button v-for="item in aboutSettings" :key="item.key" @click="currentSection = item.key"
                class="w-full flex items-center px-4 py-2.5 text-sm transition-colors" :class="[
                  currentSection === item.key
                    ? 'bg-gray-100 text-gray-900'
                    : 'text-gray-600 hover:bg-gray-50'
                ]">
                <el-icon class="mr-3" :size="18">
                  <component :is="item.icon" />
                </el-icon>
                <span>{{ item.label }}</span>
              </button>
            </div>
          </div>
        </div>

        <!-- 右侧内容区 -->
        <div class="flex-1 flex flex-col overflow-hidden">
          <div class="flex-1 overflow-y-auto p-6">
            <!-- 账号与安全 -->
            <div v-if="currentSection === 'security'" class="space-y-6">
              <h3 class="text-lg font-medium text-gray-900">账号与安全</h3>
              <div class="space-y-4">
                <button
                  class="w-full flex items-center justify-between p-4 rounded-lg border border-gray-200 hover:border-gray-300 transition-colors">
                  <div class="flex items-center">
                    <el-icon class="text-gray-400 mr-3" :size="20">
                      <Key />
                    </el-icon>
                    <div class="text-left">
                      <div class="text-sm font-medium text-gray-900">修改密码</div>
                      <div class="text-xs text-gray-500 mt-0.5">定期更改密码可以提高账号安全性</div>
                    </div>
                  </div>
                  <el-icon class="text-gray-400">
                    <ArrowRight />
                  </el-icon>
                </button>
              </div>
            </div>

            <!-- 消息通知 -->
            <div v-if="currentSection === 'notification'" class="space-y-6">
              <h3 class="text-lg font-medium text-gray-900">消息通知</h3>
              <div class="space-y-4">
                <div class="flex items-center justify-between p-4 rounded-lg border border-gray-200">
                  <div class="flex items-center">
                    <div class="text-left">
                      <div class="text-sm font-medium text-gray-900">新消息通知</div>
                      <div class="text-xs text-gray-500 mt-0.5">接收新消息时显示通知</div>
                    </div>
                  </div>
                  <el-switch v-model="notificationSettings.newMessage" />
                </div>
                <div class="flex items-center justify-between p-4 rounded-lg border border-gray-200">
                  <div class="flex items-center">
                    <div class="text-left">
                      <div class="text-sm font-medium text-gray-900">声音提醒</div>
                      <div class="text-xs text-gray-500 mt-0.5">收到消息时播放提示音</div>
                    </div>
                  </div>
                  <el-switch v-model="notificationSettings.sound" />
                </div>
              </div>
            </div>

            <!-- 其他设置项的内容... -->
          </div>

          <!-- 底部操作区 -->
          <div class="p-4 border-t border-gray-100" v-if="currentSection === 'security'">
            <button @click="handleLogout"
              class="w-full bg-red-500 hover:bg-red-600 active:bg-red-700 text-white font-medium py-3 px-4 rounded-lg transition-colors">
              退出登录
            </button>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/useUserStore'
import {
  ArrowRight,
  Close,
  Key
} from '@element-plus/icons-vue'

const props = defineProps<{
  modelValue: boolean
}>()

const emit = defineEmits<{
  'update:modelValue': [value: boolean]
}>()

const router = useRouter()
const userStore = useUserStore()
const dialogVisible = ref(false)
const currentSection = ref('security')

// 账号设置菜单项
const accountSettings = [
  { key: 'security', label: '账号与安全', icon: 'Lock' },
  { key: 'notification', label: '消息通知', icon: 'Bell' },
  { key: 'general', label: '通用设置', icon: 'Setting' },
  { key: 'files', label: '文件管理', icon: 'Folder' },
  { key: 'shortcuts', label: '快捷键', icon: 'Operation' },
]

// 关于菜单项
const aboutSettings = [
  { key: 'about', label: '关于我们', icon: 'InfoFilled' },
]

// 通知设置
const notificationSettings = ref({
  newMessage: true,
  sound: true,
})

// 监听对话框状态
watch(() => props.modelValue, (val) => {
  dialogVisible.value = val
})

watch(() => dialogVisible.value, (val) => {
  emit('update:modelValue', val)
})

// 处理退出登录
const handleLogout = async () => {
  try {
    await userStore.logout()
    ElMessage.success('退出成功')
    router.push('/login')
  } catch (error: any) {
    ElMessage.error(error.message || '退出失败')
  }
}
</script>

<style scoped>
.settings-dialog :deep(.el-dialog) {
  border-radius: 12px;
  overflow: hidden;
}

.settings-dialog :deep(.el-dialog__header) {
  display: none;
}

.settings-dialog :deep(.el-dialog__body) {
  padding: 0;
}

/* 自定义滚动条样式 */
.overflow-y-auto {
  scrollbar-width: thin;
  scrollbar-color: #E5E7EB transparent;
}

.overflow-y-auto::-webkit-scrollbar {
  width: 6px;
}

.overflow-y-auto::-webkit-scrollbar-track {
  background: transparent;
}

.overflow-y-auto::-webkit-scrollbar-thumb {
  background-color: #E5E7EB;
  border-radius: 3px;
}

.overflow-y-auto::-webkit-scrollbar-thumb:hover {
  background-color: #D1D5DB;
}
</style>